<template>
  <div class="contents">
    <PanelTitle title="产地环境" />
    <div class="mt">
      <div class="flexPanel">
        

        <div class="onePanel">
          <div class="imgLine">
            <img src="@/assets/icon1.png" class="lefticon" />
            <div>平均海拔</div>
          </div>
          <div class="shineText">600米</div>
        </div>

        <div class="onePanel">
          <div class="imgLine">
            <img src="@/assets/icon5.png" class="lefticon" />
            <div>年均温度</div>
          </div>
          <div class="shineText">13 - 18°C</div>
        </div>
        <div class="onePanel">
          <div class="imgLine">
            <img src="@/assets/icon4.png" class="lefticon" />
            <div>年降雨量</div>
          </div>
          <div class="shineText">1600 - 2400毫米</div>
        </div>
        <div class="onePanel">
          <div class="imgLine">
            <img src="@/assets/icon2.png" class="lefticon" />
            <div>年均日照</div>
          </div>
          <div class="shineText">1634.2小时</div>
        </div>
      </div>
      <!-- <div class="onePanel">
        <div class="imgLine">
          <img src="@/assets/icon3.png" class="lefticon" />
          <div>气候</div>
        </div>
        <div class="shineText">气候温热带大陆性季风气候</div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

</script>


<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  // background: #054f63ee;
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  
}

.mt {
    margin-top: vh(-40);
    color: #2cd7bc;
    font-size: vh(12);
    line-height: vh(32);
    padding: vh(10);
  }

.maps {
  height: vh(100);
  width: 100%;
}

.infoPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 vw(15) 0;

  >div {
    box-sizing: border-box;
    width: vw(160);
    height: vh(80);
    background: rgba(9, 36, 44, 0.4);
    border: vh(1) solid #43e7ff;
    padding: 0 vw(20) 0px;
    margin: vh(6) 0;
  }

  .infoTitle {
    color: #fff;
    font-size: vh(10);
    line-height: vh(30);
  }

  .infoNums {
    line-height: vh(20);
  }

  .infoNumss {
    line-height: vh(36);
  }

  .infoNum {
    color: #adffd7;
    font-size: vh(26);
    font: SourceHanSansCN-Bold;
  }

  .infoUnit {
    color: #adffd7;
    font-size: vh(16);
    font: SourceHanSansCN-Bold;
    margin-left: vw(4);
  }

  .infoSub {
    font-weight: 400;
    font-size: vh(10);
    color: #adffd7;
    line-height: vh(20);
  }
}

.flexPanel {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  > div {
    width: 50%;
  }
}


.onePanel {
  color: #fff;
  .imgLine {
    display: flex;
    align-items: center;
    .lefticon {
      width: vw(35);
      height: vw(35);
    }
  }
  .shineText {
    color: #fff;
    font-size: vh(20);
    text-shadow: 0 0 vh(10) #159aff;
    margin-left: vw(20);
  }
}

</style>